<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        
        li{
            list-style: none;
            line-height: 40px;
            border: 1px dashed #333;
        }
        .list{
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <button class="addEle">添加元素</button>
        <button class="delEle">删除元素</button>
        <ul class="list one">
            <li class="first">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last">06</li>
        </ul>
        <ul class="list two">
            <li class="first">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last">06</li>
        </ul>
    </div>
   
</body>
<script>
    var ul = document.querySelector(".list");
    var mid = document.querySelector(".mid");  
    var addEle = document.querySelector(".addEle");
    var delEle = document.querySelector(".delEle");
   
    // 传统方法获取元素    => 返回的元素的集合,可以随页面  同类型/同类名/同标签名元素的元素增加或减少 自动更新集合
    // document.getElementsByClassName()
    // document.getElementsByTagName()
    // document.getElementsByName()
    // parent.getElementsByClassName()
    // parent.getElementsByTagName()

    // querySelectorAll() 获取元素   集合始终引用获取的元素(定死了),不会随页面同类型/同类名/同标签名元素的元素增加或减少更新集合
    // document.querySelectorAll()
    
    // 如何获取 .one li
    // querySelectorAll 获取
    // var liList = document.querySelectorAll(".one li");
    // console.log(liList);

    // 传统方法获取
    var one = document.getElementsByClassName("one")[0]; // .one
    var liList = one.getElementsByTagName("li"); // .one li 
    console.log(liList);

    // console.log(one.getElementsByClassName);
    // console.log(one.getElementsByTagName);
    // console.log(one.getElementById);
    // console.log(one.getElementsByName);

    // 点击新增li 放到ul所有元素的最后放
    addEle.onclick = function(){
        var li = document.createElement("li");
        li.className = "newLi";
        li.title = "hello";
        li.textContent = "我是新增的li";
        ul.appendChild(li);
        console.log(liList);
    }

    // 点击删除最后一个li
    delEle.onclick = function(){
        ul.lastElementChild.remove();
        console.log(liList);
    }


</script>
</html>